<ion-view view-title="订座详情" class="xg-bus-detail-view" ng-controller="seatDetail1WorkCtrl">
  <ion-nav-buttons side="left">
    <a class="ion-ios-arrow-back" href="#/chengdu_work"></a>
  </ion-nav-buttons>
  <ion-content class="padding xg-bus-detail-content">
    <div class="xg-bus-detail-info">
      <p>路线：{{bus.routeName}}</p>
      <p>时间：{{bus.departureDate}}</p>
      <div id="legend"></div>
    </div>
    <div class="wrapper">
      <div class="container">
        <div class="xg-seats">
          <table>

            <tr ng-repeat="s in seats" class="seat-btn">
              <td><button class="button" ng-click="ticketSeat(s.num1)" ng-disabled="s.name1!=''"  ng-class="{'seats-unavailable':s.name1!='' && s.type1 == 1,'seats-unavailable1':s.name1!='' && s.type1 == 2,'seats-unavailable2':s.name1!='' && s.type1 == 3,'seats-available':s.name1==''}">{{s.num1}}<span class="seats-name">{{s.name1}}</span></button></td>
              <td ng-if="s.num2!=undefined"><button class="button" ng-click="ticketSeat(s.num2)" ng-disabled="s.name2!=''" ng-class="{'seats-unavailable':s.name2!='' && s.type2 == 1,'seats-unavailable1':s.name2!='' && s.type2 == 2,'seats-unavailable2':s.name2!='' && s.type2 == 3,'seats-available':s.name2==''}">{{s.num2}}<span class="seats-name">{{s.name2}}</span></button></td>
              <td class="xg-seats-road">过道</td>
              <td ng-if="s.num3!=undefined"><button class="button" ng-click="ticketSeat(s.num3)" ng-disabled="s.name3!=''"  ng-class="{'seats-unavailable':s.name3!='' && s.type3 == 1,'seats-unavailable1':s.name3!='' && s.type3 == 2,'seats-unavailable2':s.name3!='' && s.type3 == 3,'seats-available':s.name3==''}">{{s.num3}}<span class="seats-name">{{s.name3}}</span></button></td>
              <td ng-if="s.num4!=undefined"><button class="button" ng-click="ticketSeat(s.num4)" ng-disabled="s.name4!=''"  ng-class="{'seats-unavailable':s.name4!='' && s.type4 == 1,'seats-unavailable1':s.name4!='' && s.type4 == 2,'seats-unavailable2':s.name4!='' && s.type4 == 3,'seats-available':s.name4==''}">{{s.num4}}<span class="seats-name">{{s.name4}}</span></button></td>
            </tr>

          </table>
          <script id="ticketSeatModal" type="text/ng-template">
            <div class="modal xg-percar-view">
              <ion-header-bar class="booking-modal">
                <h1 class="title">预定工作车</h1>
              </ion-header-bar>
              <ion-content class="booking-modal-content xg-percar-content">
                <ng-form name="workTicketForm">
                <p class="booking-modal-p">您申请的工作车信息：</p>
                <ion-list class="xg-percar-ul float-fix">
                  <ion-item class="item-remove-animate item-avatar item-icon-right xg-percar-item xg-percar-item-work">
                    <div class="float-fix">
                      <p class="big-margin">乘车原因类别</p>
                      <select ng-options="seatReason.reason for seatReason in seatReasons" ng-model="ticketData.selectedSeatReason" required></select>
                    </div>
                    <div class="float-fix">
                      <p class="big-margin">乘车具体原因</p>
                      <label class="item item-input big-margin">
                      <textarea placeholder="最少5字" required ng-minlength="5" ng-model="ticketData.seatReasonDetail"></textarea>
                      </label>
                    </div>
                    <div class="float-fix">
                      <p></p>
                    </div>
                    <div class="float-fix">
                            <span class="ion-ios-clock-outline"></span>
                      <p>时间：{{bus.departureDate}}</p>
                    </div>
                    <div class="float-fix">
                      <span class="ion-ios-loop"></span>
                      <p>路线：{{bus.routeName}}</p>
                    </div>

                    <div class="float-fix">
                      <span class="ion-ios-person-outline"></span>
                      <p>乘坐人：{{ticketData.seatname}}</p>
                    </div>
                    <div class="float-fix" style="padding-top: 10px;padding-left: 10px" >
                      <ul class="list is-family-toggle">
                        <li class="item item-toggle">
                          是否亲属乘坐<label class="toggle toggle-calm">
                          <input type="checkbox" ng-model="ticketData.relativeChecked">
                          <div class="track">
                            <div class="handle"></div>
                          </div>
                        </label>
                        </li>
                      </ul>
                      <p ng-if="ticketData.relativeChecked"><select ng-options="relative.name for relative in ticketData.relatives " ng-change="ticketData.selectChange()" ng-disabled="!ticketData.relativeChecked" ng-model="ticketData.selectedRelative"></select> </p>
                    </div>
                  </ion-item>
                </ion-list>
                <div class="float-fix xg-check-detail">
                  <button class="button xg-check-detail-btnr" ng-click="ticketData.insert()" ng-disabled="workTicketForm.$invalid">
                    申请
                  </button>
                  <button class="button xg-check-detail-btnl" ng-click="closeModal()">
                    取消
                  </button>
                </div>
                </ng-form>
              </ion-content>
            </div>
          </script>
          <script id="ticketSeatModalNoAudit" type="text/ng-template">
            <div class="modal xg-percar-view">
              <ion-header-bar class="booking-modal">
                <h1 class="title">预定车票</h1>
              </ion-header-bar>
              <ion-content class="booking-modal-content xg-percar-content">
                <p class="booking-modal-p">您预订的车票信息如下：</p>
                <ion-list class="xg-percar-ul float-fix">
                  <ion-item class="item-remove-animate item-avatar item-icon-right xg-percar-item xg-percar-item-work">
                    <div class="float-fix">
                                            <span class="ion-ios-clock-outline">
                                            </span>
                      <p>时间：{{bus.departureDate}}</p>
                    </div>
                    <div class="float-fix">
                      <span class="ion-ios-loop"></span>
                      <p>路线：{{bus.routeName}}</p>
                    </div>
                    <div class="float-fix">
                      <span class="ion-ios-location-outline"></span>
                      <p>位置：第 {{ticketData.num}} 位</p>
                    </div>
                    <div class="float-fix">
                      <span class="ion-ios-person-outline"></span>
                      <p>乘坐人：{{ticketData.seatname}}</p>
                    </div>
                    <div class="float-fix" style="padding-top: 10px;padding-left: 10px" ng-if="false">
                      <ul class="list is-family-toggle">
                        <li class="item item-toggle">
                          是否亲属乘坐<label class="toggle toggle-calm">
                          <input type="checkbox" ng-model="ticketData.relativeChecked">
                          <div class="track">
                            <div class="handle"></div>
                          </div>
                        </label>
                        </li>
                      </ul>
                      <p ng-if="ticketData.relativeChecked"><select ng-options="relative.name for relative in ticketData.relatives " ng-change="ticketData.selectChange()" ng-disabled="!ticketData.relativeChecked" ng-model="ticketData.selectedRelative"></select> </p>
                    </div>
                  </ion-item>
                </ion-list>
                <div class="float-fix xg-check-detail">
                  <button class="button xg-check-detail-btnr" ng-click="ticketData.insert()">
                    预定
                  </button>
                  <button class="button xg-check-detail-btnl" ng-click="closeModal()">
                    取消
                  </button>
                </div>
              </ion-content>
            </div>
          </script>
        </div>

      </div>
    </div>

    <!--     <script src="js/seat-charts/jquery-1.11.3.min.js"></script>
        <script src="js/seat-charts/jquery.seat-charts.js"></script> -->

  </ion-content>
</ion-view>
